<template>
  <div class="p-[20px] bg-white">
    <vxe-grid ref="tableRef" v-bind="gridOptions">
      <template #operate="scope">
        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <RouterLink
          :to="{
            name: 'PaymentSplitBind',
            query: {
              subMerchantId: scope.row.id,
              merCupNo: scope.row.merCupNo,
            },
          }"
        >
          <el-button type="text">绑定分账方</el-button>
        </RouterLink>
        <RouterLink
          :to="{
            name: 'PaymentSplit',
            query: { storeCode: scope.row.storeCode },
          }"
        >
          <el-button type="text">分账记录</el-button>
        </RouterLink>
        <RouterLink
          :to="{
            name: 'PaymentSplitGate',
            query: { merCupNo: scope.row.merCupNo },
          }"
        >
          <el-button type="text">开通分账</el-button>
        </RouterLink>
      </template>
    </vxe-grid>
    <StoreSubForm
      :data="formDialogData"
      v-model:visible="formDialogVisible"
      @success="reloadTable"
    />
  </div>
</template>

<script lang="ts" setup>
import PaymentAPI, { PaymentStoreVO } from "@/api/payment";
import { useDict } from "@/composes/useDict";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";
import StoreSubForm from "./components/StoreSubForm.vue";

interface RowVO {
  [key: string]: any;
}

const router = useRouter();
const route = useRoute();

const formDialogVisible = ref(false);
const formDialogData = ref({});

const handleEdit = (row: PaymentStoreVO) => {
  formDialogData.value = row;
  formDialogVisible.value = true;
};

const gridOptions = reactive<VxeGridProps<PaymentStoreVO>>({
  showOverflow: false,
  border: true,
  height: 548,
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    data: {
      parentMerchantNo: route.query?.storeCode ?? "",
    },
    items: [],
  },
  proxyConfig: {
    form: false,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page }) => {
        const form: PaymentStoreVO = gridOptions.formConfig?.data;
        return PaymentAPI.getSubStoreList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { title: "创建时间", field: "createdAt", minWidth: 160 },
    {
      title: "商家注册名称<br/>商家经营名称",
      type: "html",
      align: "center",
      field: "registerName",
      minWidth: 160,
      formatter: ["doubleProp", "operateName"],
    },
    {
      title: "银联商家号<br/>商家号",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "merInnerNo"],
      field: "merCupNo",
      minWidth: 160,
    },
    {
      title: "商家联系人<br/>电话",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "managerTel"],
      field: "managerName",
      minWidth: 160,
    },
    {
      title: "所属通道<br/>专业化扫码终端号",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "termProfessionNo"],
      field: "channelTypeName",
      minWidth: 160,
    },
    {
      title: "提款模式",
      field: "settleType",
      minWidth: 160,
    },
    // {
    //   title: "钱包ID<br/>提款模式",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "managerTel"],
    //   field: "managerName",
    //   minWidth: 160,
    // },
    {
      title: "主商家编号<br/>商家名称",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "name"],
      field: "parentMerchantNo",
      minWidth: 160,
    },
    {
      title: "商家分账状态<br/>平台分账绑定状态",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "separateBindStatusName"],
      field: "splitStatusName",
      minWidth: 160,
    },
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      align: "center",
      showOverflow: false,
      slots: { default: "operate" },
      minWidth: 300,
    },
  ],
});

const initFormConfig = (dicts: any) => {
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      // 商家名称
      {
        field: "nickname",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家名称",
          },
        },
      },
      {
        field: "parentMerchantNo",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          defaultValue: "123",
          props: {
            placeholder: "主商家编号",
          },
        },
      },
      // {
      //   field: "parentMerchantNo",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElInput",
      //     props: {
      //       placeholder: "主商家简称",
      //     },
      //   },
      // },
      {
        field: "operateName",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "经营名称",
          },
        },
      },
      {
        field: "merCupNo",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "银联商户号",
          },
        },
      },
      {
        field: "merInnerNo",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "内部商家号",
          },
        },
      },
      {
        field: "managerName",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家联系人",
          },
        },
      },
      {
        field: "managerTel",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "电话",
          },
        },
      },
      // {
      //   field: "storeCode",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElInput",
      //     props: {
      //       placeholder: "渠道名称/渠道编号",
      //     },
      //   },
      // },
      {
        field: "channelType",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: dicts.channelTypeList,
          props: {
            placeholder: "所属通道",
          },
        },
      },
      {
        field: "createdAt",
        title: "",
        span: 8,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          events: {
            click(cellParams, params) {
              if (params.name === "add") {
                formDialogData.value = {};
                formDialogVisible.value = true;
              }
            },
          },
          options: [
            { type: "submit", content: "搜索", status: "primary" },
            { content: "新增", name: "add" },
          ],
        },
      },
    ];
  }
};

useDict((dict) => {
  initFormConfig(dict);
});

// const route = useRoute();

const tableRef = ref();

const reloadTable = () => {
  tableRef.value.commitProxy("query");
};

// onMounted(() => {
//   if (route.query.storeCode) {
//     if (gridOptions.formConfig?.data) {
//       gridOptions.formConfig.data.parentMerchantNo = route.query.storeCode;
//       reloadTable();
//     }
//   }
// });
</script>
